import React, { useEffect } from 'react'
import {Drawer, Layout, Select, Table, Tree} from 'antd'
import lay from '../assets/css/layout.module.css'
import { useState } from 'react'
import { Modal,Input,message } from "antd";
import { useRef } from 'react';
import { getXiangmu } from '../request/index.js';
import '../assets/css/tree.css'
import axios from 'axios'
export default function Xiangmuguanli() {
const {Header,Sider,Content} = Layout
const {header,content,body} = Drawer
let [list,setList] = useState([])
//新增项目
let [addBol,setAddbol] = useState(false)
let [xname,setXname] = useState('')
let [modalList,setModalList] = useState([{
    status:false
},

{
    status:false
}])
const SaveXm=()=>{
    let time = new Date().toLocaleString()
    axios.post('http://172.16.17.120:8080/addxm',{
        name:xname,
        modal1:modalList[0].status,
        modal2:modalList[1].status,
        time:time
    }).then(res=>{
        message.open({
            type:'success',
            content:'项目新建成功!'
        })
        setAddbol(false)
        getXiangmu().then(res=>{
            setList([...res.data])
        })
    })
}
//修改项目
let [putBol,setPutbol] = useState(false)
let [putid,setPutid] = useState('')
const putXm=()=>{
    axios.put('http://172.16.17.120:8080/changexm',{
        id:putid,
        name:xname,
        modal1:modalList[0].status,
        modal2:modalList[1].status
    }).then(res=>{
        message.open({
            type:'success',
            content:'项目保存成功!'
        })
        setPutbol(false)
        getXiangmu().then(res=>{
            setList([...res.data])
        })
    })
}
//项目详情
let [xmBol,setXmbol] = useState(false)
let [xmDetail,setXmdetail] = useState({})
let [delid,setDelid] = useState(0)
const timeFomat=(str)=>{
    let res= str.replace('T','     ')
     res =res.split('.0')[0]
    return res
    
}
const columns=[
    {
        title:'登录账号',
        dataIndex:'phone',
        key:'phone',
        align:'center',
        render:(phone)=><div><span style={{fontSize:14,paddingRight:10,color:'#707481'}}>+86</span>{phone}</div>
    },
    {
        title:'备注姓名',
        dataIndex:'name',
        key:'name',
        align:'center',
        render:(name)=><div>{name}</div>
    },
    {
        title:'项目加入时间',
        dataIndex:'time',
        key:'time',
        align:'center',
        render:(time)=><div>{time.split('T')[0]}</div>
    }
]
let [xmpeople,setXmpeople] = useState([])
const getPeople=()=>{
    axios.get('http://172.16.17.120:8080/xmpeople').then(res=>{
        setXmpeople([...res.data])
    })
}
//抽屉改变项目名称
let [drawerName,setDrawername] = useState(false)
let changeName = useRef(null)
const ChangeXmName=()=>{
    
    
    axios.put('http://172.16.17.120:8080/changexmname',{
        id:xmDetail.id,
        name:changeName.current.value
    }).then(res=>{
        xmDetail.name = changeName.current.value
        setXmdetail(xmDetail)
        setDrawername(false)
        getXiangmu().then(res=>{
            setList([...res.data])
        })
    })
}
//人员管理
let [managepeople,setManagepeople] = useState(false)
const peopleColumn =[
    {
        title:'登录账号',
        dataIndex:'phone',
        key:'phone',
        align:'left',
        render:(_,aa)=><div>{aa.phone} {aa.op?<span style={{width:46,height:18,backgroundColor:'#F1EFFF',color:'#8479E3'}}>管理员</span>:null}</div>
    },
    {
        title:'备注姓名',
        dataIndex:'name',
        key:'name',
        align:'left',
        render:(_,aa)=>{
            return (<div style={{display:'flex'}}>
                

                <div style={changepeopleName==aa.name?{display:'flex'}:{display:'none'}}>
                    <input defaultValue={aa.name} ref={peopleName} style={{width:58,height:24,outline:'none',boxShadow:'0 2px 6px 0 rgba(132,121,227,0.15)',border:'1px solid #8479E3',textAlign:'center',marginRight:10}} type="text" onChange={(e)=>{
                        peopleName.current.value = e.currentTarget.value
                    }}/> <div style={{backgroundColor:'#8479E3',color:'white',width:36,height:24,textAlign:'center',alignContent:'center'}} onClick={()=>{

                        doChangeName(peopleName.current.value,aa.id)
                    }}>保存</div>
                </div>
                    <div style={changepeopleName==aa.name?{display:'none'}:{display:'flex'}}><div style={{width:58,height:24,textAlign:'center',marginRight:10}}>{aa.name}</div> 
                    <img style={{width:14,height:14}} onClick={()=>{ 
                        peopleName.current.value=aa.name
                        setChangepeoplename(aa.name)
                    }} src={getImg('../assets/images/bianji.png')}></img>
                </div>
                
                </div>)
    }},
    {
        title:'状态',
        dataIndex:'status',
        key:'status',
        align:'center',
        render:(status)=><div>{status}</div>
    },
    {
        title:'操作',
        dataIndex:'id',
        key:'id',
        align:'center',
        render:(_,aa)=><div style={{fontSize:14,}}><span style={{color:'#8479E3'}} onClick={()=>{setQuanxian(true)}}>权限</span> <span style={{color:'#ee6723'}} onClick={()=>{
            setDeleteP(true)
            setDeletePid(aa.id)
        }}>删除</span></div>
    },
]
//修改人员名称
let [changepeopleName,setChangepeoplename] = useState('')
let peopleName = useRef('')
const getImg=(url)=>{

    return new URL(url,import.meta.url).href
}
//提交修改人员名称
const doChangeName=(name,id)=>{
        axios.put('http://172.16.17.120:8080/changepeoplename',{
            name:name,
            id:id
        }).then(res=>{
            getPeople()
            changepeopleName=''
        })
        
}
//删除人员
let [deleteP,setDeleteP] = useState(false)
let [deletePid,setDeletePid] = useState('')
const deletePeople=()=>{
    axios.delete('http://172.16.17.120:8080/deletepeople',{
        params:{
            id:deletePid
        }
    }).then(res=>{
        setDeletePid('')
        getPeople()
        setDeleteP(false)
    })
}
//增加人员
let [addpeople,setAddpeople] = useState(false)
let addPhone = useRef('')
let addName = useRef('')
const addXmpeople = (phone,name)=>{
    axios.post('http://172.16.17.120:8080/addxmpeople',{
        phone:phone,
        name:name
    }).then(res=>{
        setAddpeople(false)
        getPeople()
        
    })
}
//权限管理
let [quanxian,setQuanxian] = useState(false)
const { TreeNode } = Tree;
//树结构子元素横向排列渲染
const renderTreeNodes = (data) =>
    data.map((item) => {
      if (item.children) {
        return (
          <TreeNode title={item.title} key={item.key}>
            {renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode {...item} key={item.key} className='leaf-node' />;
});
let treeData = [
    {
      title:'项目',
      key:'1',
      children:[
        {
          title:'人员管理',
          key:'1-1',
          isLeaf:true
        }
        
      ]
    },
    {
        title:'客户',
        key:'2',
        children:[
            {
                title:'客户管理',
                key:'2-1',
                children:[
                    {
                        title:'新建',
                        key:'2-1-1'
                    },
                    {
                        title:'编辑',
                        key:'2-1-2'
                    },
                    {
                        title:'查看',
                        key:'2-1-3'
                    },
                    {
                        title:'删除',
                        key:'2-1-4'
                    },
                ]
            }
        ]
    },
    {
        title:'资产',
        key:'3',
        children:[
            {
                title:'楼宇',
                key:'3-1',
                children:[
                    {
                        title:'新建',
                        key:'3-1-1'
                    },
                    {
                        title:'编辑',
                        key:'3-1-2'
                    },
                    {
                        title:'查看',
                        key:'3-1-3'
                    },
                    {
                        title:'删除',
                        key:'3-1-4'
                    },
                ]
            },
            {
                title:'空间',
                key:'3-2',
                children:[
                    {
                        title:'新建',
                        key:'3-2-1'
                    },
                    {
                        title:'编辑',
                        key:'3-2-2'
                    },
                    {
                        title:'查看',
                        key:'3-2-3'
                    },
                    {
                        title:'删除',
                        key:'3-2-4'
                    },
                    {
                        title:'上架',
                        key:'3-2-5'
                    },
                    {
                        title:'下架',
                        key:'3-2-6'
                    }
                ]
            }
        ]
    },
    {
        title:'招商',
        key:'4',
        children:[
            {
                title:'空间定价',
                key:'4-1',
                children:[
                    {
                        title:'查看',
                        key:'4-1-1'
                    },
                    {
                        title:'编辑单位租金',
                        key:'4-1-2'
                    }
                ]
            },
            {
                title:'租控',
                key:'4-2',
                children:[
                    {
                        title:'查看',
                        key:'4-2-1'
                    },
                    {
                        title:'暂停招商',
                        key:'4-2-2'
                    },
                    {
                        title:'恢复招商',
                        key:'4-2-3'
                    }
                ]
            },
            {
                title:'租约',
                key:'4-3',
                children:[
                    {
                        title:'新建新租租约',
                        key:'4-3-1'
                    },
                    {
                        title:'编辑',
                        key:'4-3-2'
                    },
                    {
                        title:'作废',
                        key:'4-3-3'
                    },
                    {
                        title:'查看',
                        key:'4-3-4'
                    },
                    {
                        title:'删除',
                        key:'4-3-5'
                    }
                ]
            },
            
        ]
    },
    {
        title:'运营',
        key:'5',
        children:[
            {
                title:'租期',
                key:'5-1',
                children:[
                    {
                        title:'新建',
                        key:'5-1-1'
                    },
                    {
                        title:'查看',
                        key:'5-1-2'
                    }
                ]
            },
            {
                title:'报修',
                key:'5-2',
                children:[
                    {
                        title:'查看',
                        key:'5-2-1'
                    },
                    {
                        title:'分配',
                        key:'5-2-2'
                    },
                    {
                        title:'解决',
                        key:'5-2-3'
                    },
                    {
                        title:'保修设置',
                        key:'5-2-4'
                    }
                ]
            },
            {
                title:'公告管理',
                key:'5-3',
                children:[]
            },
            {
                title:'物业须知管理',
                key:'5-4',
                children:[]
            },
            {
                title:'管理员反馈',
                key:'5-5',
                children:[]
            }
        ]
    }
  ];
const getOp=()=>{
    let list = xmpeople.filter(item=>item.op)
    console.log(list);
    return list[0]
}
//加入的项目
let [jrxm,setJrxm] = useState([])
const getJrxm = ()=>{
    axios.get('http://172.16.17.120:8080/jrxm').then(res=>{
        setJrxm([...res.data])
    })
}
//修改加入项目的状态
const changeJrstatus=(id)=>{
    axios.put('http://172.16.17.120:8080/changejsstatus',{id:id}).then(res=>{
        message.open({
            type:'success',
            content:'加入成功!'
        })
        getJrxm()
    })
}
//拒绝加入 删除
const refuseJiaru=(id)=>{
    axios.post('http://172.16.17.120:8080/deleteJr',{id:id}).then(res=>{
        message.open({
            type:'success',
            content:'拒绝成功!'
        })
        getJrxm()
    })
}
//转让项目
let [zhuanrang,setZhuanrang] = useState(false)
useEffect(()=>{
getPeople()
getXiangmu().then(res=>{
    setList([...res.data])
})
getJrxm()
},[])


// 删除项目
const deletexiangm= () => {
  axios.post('http://172.16.17.120:8080/delShouhuodizhiList',{
    params:{
      id:delid
    }
  }).then(res =>{
    console.log(res.data)
    getXiangmu().then(res=>{
        setList([...res.data])
    })
  })
}
  return (
    <>
                
                            {
                                list.length?
                                (<div style={{backgroundColor:'rgb(245, 247, 250)',width:'100%',height:'calc(100vh - 60px)'}}>
                                        <div className={lay.xmBox}>
                                                <h2>我负责的项目</h2>
                                                <div className={lay.xmList}>
                                                    {list.map(item=>{
                                                        return (<div className={lay.xm} key={item.id}>
                                                            <h2>{item.name}<img onClick={()=>{
                                                                setPutbol(true)
                                                                setXname(item.name)
                                                                setPutid(item.id)
                                                                setModalList([{
                                                                    status:item.modal1,
                                                                    
                                                                },{status:item.modal2}])
                                                            }} src={getImg('../assets/images/项目基本信息.png')} alt="" /></h2>
                                                            <div className={lay.xmmodal}>
                                                                {item.modal1?<div style={{backgroundColor:'#E1F7E2',color:'#75C476',marginRight:6}}>招商</div>:null}
                                                                {item.modal2?<div style={{backgroundColor:'#FFF0DB',color:'#FF8F00'}}>运营</div>:null}
                                                                {item.modal1||item.modal2?null:<div style={{backgroundColor:'white'}}></div>}
                                                            </div>
                                                            <div className={lay.people}>人员({item.people}) &gt;</div>
                                                            <div className={lay.toxmButton} onClick={()=>{
                                                                setXmbol(true)
                                                                setXmdetail(item)
                                                                setDelid(item.id)
                                                            }}>进入项目</div>
                                                        </div>)
                                                    })}
                                                    <div className={lay.xm} style={{padding:0}}><img onClick={()=>{
                                                setAddbol(true)
                                            }} style={{width:'100%',height:'100%'}} src={getImg('../assets/images/新建.png')} alt="" /></div>
                                                </div>
                                        </div>
                                        <div className={lay.xmBox}>
                                                <h2>我加入的项目</h2>
                                                <div className={lay.xmList}>
                                                    {jrxm.map(item=>{
                                                        return (<div className={lay.xm} key={item.id} style={{paddingBottom:0}}>
                                                                <h2>{item.name}<img onClick={()=>{
                                                                    setPutbol(true)
                                                                    setXname(item.name)
                                                                    setPutid(item.id)
                                                                    setModalList([{
                                                                        status:item.modal1,
                                                                        
                                                                    },{status:item.modal2}])
                                                                }} src={getImg('../assets/images/项目基本信息.png')} alt="" /></h2>
                                                                <div className={lay.xmmodal}>
                                                                    {item.modal1?<div style={{backgroundColor:'#E1F7E2',color:'#75C476',marginRight:6}}>招商</div>:null}
                                                                    {item.modal2?<div style={{backgroundColor:'#FFF0DB',color:'#FF8F00'}}>运营</div>:null}
                                                                    {item.modal1||item.modal2?null:<div style={{backgroundColor:'white'}}></div>}
                                                                </div>
                                                                <div className={lay.people}>人员({item.people}) &gt;</div>
                                                                {item.status?<div className={lay.toxmButton} onClick={()=>{
                                                                    setXmbol(true)
                                                                    setXmdetail(item)
                                                                }}>进入项目</div>:<div style={{marginTop:9,borderTop:'1px solid #ECEFF3',display:'flex'}}>
                                                                        <div style={{width:'50%',textAlign:'center',height:35,color:'#8870E6',alignContent:'center',borderRight:'1px solid #ECEFF3'}} onClick={()=>{
                                                                            changeJrstatus(item.id)
                                                                        }}>接受</div>
                                                                        <div style={{width:'50%',textAlign:'center',height:35,color:'#707481',alignContent:'center'}} onClick={()=>{
                                                                            refuseJiaru(item.id)
                                                                        }}>拒绝</div>
                                                                        
                                                                    </div>}
                                                        </div>)
                                                    })}
                                                    
                                                </div>
                                        </div>
                                </div>)
                                :(<div style={{backgroundColor:'#F5F7FA',width:'100%',height:'calc(100vh - 60px)'}}>
                                        <div style={{paddingTop:180,display:'flex',flexDirection:'column',justifyContent:'center',alignItems:'center'}}>
                                            <img style={{width:650,height:280}} src={getImg('../assets/images/8.png')} alt="" />
                                            <div className={lay.xiangmuKongzi}>还没有您负责的项目,马上<span onClick={()=>{
                                                setAddbol(true)
                                            }}>创建项目</span></div>
                                        </div>
                                </div>)

                            }
             
                <Modal
                open={addBol}
                footer
                title='新建项目'
                width={708}
                onCancel={()=>{
                    setAddbol(false)
                }}
                >
                <div className={lay.modalContent}>
                    <div className={lay.inputbox}>
                        <div className={lay.title}>项目名称 :</div>
                        <input type="text" value={xname} onChange={(e)=>{
                                setXname(e.target.value)
                        }} placeholder='请输入'/>
                    </div>
                    <div className={lay.inputbox}>
                        <div className={lay.title}>开通模块</div>
                        <div className={lay.mokuaiList}>
                            <div className={lay.block}>
                                <h3>招商</h3>
                                <div className={lay.mokuaiInfo}>空间定价 | 租控 | 租约</div>
                                {modalList[0].status?<button className={lay.activedButton} onClick={()=>{
                                    modalList[0].status=!modalList[0].status
                                    setModalList([...modalList])
                                }}>已开通</button>:<button onClick={()=>{
                                    modalList[0].status=!modalList[0].status
                                    setModalList([...modalList])
                                }}>开通</button>}
                            </div>
                            <div className={lay.block}>
                                <h3>运营</h3>
                                <div className={lay.mokuaiInfo}>公告 | 服务保修 | 投诉建议</div>
                                {modalList[1].status?<button className={lay.activedButton} onClick={()=>{
                                    modalList[1].status=!modalList[1].status
                                    setModalList([...modalList])
                                }}>已开通</button>:<button onClick={()=>{
                                    modalList[1].status=!modalList[1].status
                                    setModalList([...modalList])
                                }}>开通</button>}
                            </div>
                            <div className={lay.block}>
                                <h3>社区</h3>
                                <div className={lay.mokuaiInfo}>即将上线~</div>
                            </div>
                            <div className={lay.block}>
                                <h3>设备设施</h3>
                                <div className={lay.mokuaiInfo}>即将上线~</div>
                            </div>
                            <div className={lay.block}>
                                <h3>增值服务</h3>
                                <div className={lay.mokuaiInfo}>即将上线~</div>
                            </div>
                            <div className={lay.block}>
                                <h3>数据</h3>
                                <div className={lay.mokuaiInfo}>即将上线~</div>
                            </div>
                            
                        </div>
                    </div>
                    <div style={{display:'flex',justifyContent:'center'}}>
                        <div className={lay.saveButton} onClick={()=>{
                            SaveXm()
                        }}>保存</div>
                    </div>
                    
                </div>
                </Modal> 
                <Modal
                open={putBol}
                footer
                title='项目编辑'
                width={708}
                onCancel={()=>{
                    setPutbol(false)
                }}
                >
                <div className={lay.modalContent}>
                    <div className={lay.inputbox}>
                        <div className={lay.title}>项目名称 :</div>
                        <input type="text" value={xname} onChange={(e)=>{
                                setXname(e.target.value)
                        }} placeholder='请输入'/>
                    </div>
                    <div className={lay.inputbox}>
                        <div className={lay.title}>开通模块</div>
                        <div className={lay.mokuaiList}>
                            <div className={lay.block}>
                                <h3>招商</h3>
                                <div className={lay.mokuaiInfo}>空间定价 | 租控 | 租约</div>
                                {modalList[0].status?<button className={lay.activedButton} onClick={()=>{
                                    modalList[0].status=!modalList[0].status
                                    setModalList([...modalList])
                                }}>已开通</button>:<button onClick={()=>{
                                    modalList[0].status=!modalList[0].status
                                    setModalList([...modalList])
                                }}>开通</button>}
                            </div>
                            <div className={lay.block}>
                                <h3>运营</h3>
                                <div className={lay.mokuaiInfo}>公告 | 服务保修 | 投诉建议</div>
                                {modalList[1].status?<button className={lay.activedButton} onClick={()=>{
                                    modalList[1].status=!modalList[1].status
                                    setModalList([...modalList])
                                }}>已开通</button>:<button onClick={()=>{
                                    modalList[1].status=!modalList[1].status
                                    setModalList([...modalList])
                                }}>开通</button>}
                            </div>
                            <div className={lay.block}>
                                <h3>社区</h3>
                                <div className={lay.mokuaiInfo}>即将上线~</div>
                            </div>
                            <div className={lay.block}>
                                <h3>设备设施</h3>
                                <div className={lay.mokuaiInfo}>即将上线~</div>
                            </div>
                            <div className={lay.block}>
                                <h3>增值服务</h3>
                                <div className={lay.mokuaiInfo}>即将上线~</div>
                            </div>
                            <div className={lay.block}>
                                <h3>数据</h3>
                                <div className={lay.mokuaiInfo}>即将上线~</div>
                            </div>
                            
                        </div>
                    </div>
                    <div style={{display:'flex',justifyContent:'center'}}>
                        <div className={lay.saveButton} onClick={()=>{
                            putXm()
                        }}>保存</div>
                    </div>
                    
                </div>
                </Modal> 
                <Drawer
                    className={lay.drawerWp}
                    width={790}
                    height={700}
                    footer
                    open={xmBol}
                    headerStyle={{
                        height:0,
                        overflow:'hidden',
                        padding:0
                    }}
                >        <img onClick={()=>{
                            setXmbol(false)
                        }} className={lay.closebutton} src={getImg('../assets/images/关闭按钮.png')} alt="" />
                         {xmBol?<div className={lay.drawerBox} >
                                <div className={lay.drawerheader}>
                                   
                                    <div style={{display:'flex',alignItems:'center'}}>
                                        <input  ref={changeName} type='text' style={drawerName?{width:108,height:18,border:'none',borderBottom:'1px solid #8479E3',borderRight:'1px solid #000000',outline:'none',marginRight:11}:{display:'none'}} onChange={(e)=>{
                                                
                                                    
                                        }} />
                                        <div className={lay.drawTitle} style={!drawerName?null:{display:'none'}}>{xmDetail.name}</div>
                                        {drawerName?<div style={{backgroundColor:'#8479E3',width:36,height:18,borderRadius:2,textAlign:'center',color:'white',alignContent:'center'}} onClick={()=>{ChangeXmName()}}>保存</div>:<img style={{width:14,height:14}} onClick={()=>{
                                            changeName.current.value = xmDetail.name
                                            setDrawername(true)}} src={getImg('../assets/images/bianji.png')} alt="" />}
                                    </div>
                                    <div className={lay.caozuo}>
                                        <span style={{color:'#8479E3'}} onClick={()=>{
                                            setZhuanrang(true)
                                        }}>转让</span>
                                        <span style={{color:'#F97171'}} onClick={()=>{
                                            deletexiangm()
                                            setXmbol(false)
                                            // setDeleteP(true)
                                        }} >删除</span>
                                    </div>
                                </div>
                                <div className={lay.basicinfo}>
                                    <div className={lay.topbox}>
                                        <div>基础信息</div>
                                    </div>
                                    <div className={lay.basiccontent}>
                                        <div className={lay.basict}>项目管理员</div>
                                        <div className={lay.basict}>项目创建时间</div>
                                        <div className={lay.basicc}>{getOp()}</div>
                                        <div className={lay.basicc}>{timeFomat(xmDetail.time)}</div>
                                    </div>
                                    
                                </div>
                                <div className={lay.xmpeople}>
                                    <div className={lay.topbox}>
                                            <div>项目人员</div>
                                            <div style={{color:'#8479E3'}} onClick={()=>{setManagepeople(true)}}>管理</div>
                                    </div>
                                    <Table
                                    columns={columns}
                                    dataSource={xmpeople}
                                    >
                                    </Table>
                                </div>
                                <div className={lay.inputbox}>
                                    <div className={lay.title}>开通模块</div>
                                    <div className={lay.mokuaiList}>
                                        <div className={lay.block}>
                                            <h3>招商</h3>
                                            <div className={lay.mokuaiInfo}>空间定价 | 租控 | 租约</div>
                                            {xmDetail.modal1?<button className={lay.activedButton}>已开通</button>:<button>开通</button>}
                                        </div>
                                        <div className={lay.block}>
                                            <h3>运营</h3>
                                            <div className={lay.mokuaiInfo}>公告 | 服务保修 | 投诉建议</div>
                                            {xmDetail.modal2?<button className={lay.activedButton}>已开通</button>:<button>开通</button>}
                                        </div>
                                        <div className={lay.block}>
                                            <h3>社区</h3>
                                            <div className={lay.mokuaiInfo}>即将上线~</div>
                                        </div>
                                        <div className={lay.block}>
                                            <h3>设备设施</h3>
                                            <div className={lay.mokuaiInfo}>即将上线~</div>
                                        </div>
                                        <div className={lay.block}>
                                            <h3>增值服务</h3>
                                            <div className={lay.mokuaiInfo}>即将上线~</div>
                                        </div>
                                        <div className={lay.block}>
                                            <h3>数据</h3>
                                            <div className={lay.mokuaiInfo}>即将上线~</div>
                                        </div>
                                        
                                    </div>
                                </div>
                            </div>:<div></div>}
                    
                </Drawer>
                <Drawer
                    className={lay.drawerWp}
                    width={770}
                    height={700}
                    footer
                    open={managepeople}
                    headerStyle={{
                        height:0,
                        overflow:'hidden',
                        padding:0
                    }}
                >        <img onClick={()=>{
                            setManagepeople(false)
                        }} className={lay.closebutton} src={getImg('../assets/images/关闭按钮.png')} alt="" />
                         {xmBol?<div className={lay.drawerBox} >
                                <div className={lay.drawerheader}>
                                   
                                    <div style={{display:'flex',alignItems:'center'}}>
                                        
                                        <div className={lay.drawTitle} >人员管理</div>
                                        {drawerName?<div style={{backgroundColor:'#8479E3',width:36,height:18,borderRadius:2,textAlign:'center',color:'white',alignContent:'center'}} onClick={()=>{ChangeXmName()}}>保存</div>:<img style={{width:14,height:14}} onClick={()=>{
                                            changeName.current.value = xmDetail.name
                                            setDrawername(true)}} src={getImg('../assets/images/bianji.png')} alt="" />}
                                    </div>
                                    <div className={lay.caozuo}>
                                        <span style={{color:'#8479E3'}} onClick={()=>{
                                            setAddpeople(true)
                                        }}>添加人员</span>
                                        
                                    </div>
                                </div>
                                
                                <div className={lay.xmpeople}>
                                    
                                    <Table
                                    columns={peopleColumn}
                                    dataSource={xmpeople}
                                    >
                                    </Table>
                                </div>
                               
                            </div>:<div></div>}
                    
                </Drawer>
                <Modal
                    open={deleteP}
                    onCancel={()=>{
                        setDeleteP(false)
                    }}
                    footer
                    width={308}
                    height={160}
                    style={{top:270}}
                >   
                <div className={lay.deleteBox}>
                    <div>此操作是不可恢复的！</div>
                    <div>您确认要执行此删除操作吗?</div>
                    <div style={{display:'flex',justifyContent:'space-between'}}>
                        <button style={{backgroundColor:'#8479E3'}} onClick={()=>{
                            // deletexiangm()
                            deletePeople()
                        }}>确定</button>
                        <button style={{color:'#999CB2'}} onClick={()=>{setDeleteP(false)}}>取消</button>
                    </div>
                </div>
                    

                </Modal>
                <Modal
                    width={440}
                    open={addpeople}
                    onCancel={()=>{setAddpeople(false)}}
                    footer
                    title='添加人员'
                >
                    <div className={lay.addPbox}>
                        <div className={lay.inputbox}>
                            <div className={lay.title}>登录账号</div>
                            <div className={lay.input}>
                            <Select
                            defaultValue="中国+86"
                            style={{
                                width: 120,
                                backgroundColor:'#E1E8EE',
                                marginRight:10
                            }}
                            
                            options={[
                                {
                                value: '0',
                                label: '中国+86',
                                },
                                {
                                value: '1',
                                label: '中国+87',
                                },
                                {
                                value: '2',
                                label: '中国+88',
                                },
                                {
                                value: '3',
                                label: '中国+89',
                                },
                            ]}
                            />
                            <input placeholder='请输入' ref={addPhone} onChange={(e)=>{
                                        addPhone.current.value=e.currentTarget.value
                                        
                                    
                                }} />
                            </div>
                        </div>
                        <div className={lay.inputbox}>
                            <div className={lay.title}>备注姓名</div>
                            <div className={lay.input}>
                                <input placeholder='请输入'  ref={addName} onChange={(e)=>{
                                        addName.current.value=e.currentTarget.value
                                }} />
                            </div>
                        </div>
                        <div className={lay.button}  onClick={()=>{
                            addXmpeople(addName.current.value,addPhone.current.value)
                            
                        }}>保存</div>
                    </div>
                </Modal>
                <Modal
                    open={quanxian}
                    onCancel={()=>{setQuanxian(false)}}
                    footer
                    title='权限配置'
                >
                    <div className={lay.treeBox}>
                        <div className={lay.tree}>
                        <Tree
                        multiple={true}
                        checkable
                        >{ renderTreeNodes(treeData) }
                        </Tree>

                        </div>
                        <div className={lay.buttonBox}>
                            <div className={lay.button} style={{marginRight:10,color:'#8479E3'}} onClick={()=>{setQuanxian(false)}}>选择全部</div>
                            <div className={lay.button} style={{backgroundColor:'#8479E3'}} onClick={()=>{setQuanxian(false)}}>保存</div>
                        </div>
                    </div>
                    
                </Modal>
                <Modal
                open={zhuanrang}
                onCancel={()=>{setZhuanrang(false)}}
                footer
                title='项目转让'
                style={{top:238}}
                >
                    <div className={lay.zhuangBox}>

                        <Select
                        options={[
                            {
                                value:'王德发',
                                label:'王德发'
                            },
                            {
                                value:'李伟',
                                label:'李伟'
                            }
                        ]}
                        defaultValue={'项目接收人'}
                        style={{width:'100%',backgroundColor:' #F8FBFF;'}}
                        >

                        </Select>
                        <div className={lay.button} onClick={()=>{
                            message.open({
                                type:'success',
                                content:'项目转让成功!'
                            })
                            setZhuanrang(false)
                        }}>保存</div>
                    </div>
                    
                </Modal>
    </>
  )
}
